<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas  save&restore</title>
  <style>
    body{
      text-align: center;
    }
    #canvas{
      background-color: #cccccc;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="500" height="400"></canvas>

  <script>
    // save() 保存画笔状态(原点;角度;颜色;...)
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    var img = new Image();
    img.src = "../res/p3.png";
    img.onload = function () {

      var deg1 = 0;
      var deg2 = 0;
      var time = setInterval(()=>{
        ctx.clearRect(0,0,500,400);
        ctx.save();
        ctx.translate(150,150);
        // ctx.clearRect(-250,-200,500,400);
        ctx.rotate(deg1 * Math.PI/180);
        ctx.drawImage(img,-100,-50,200,100);
        ctx.restore();

        ctx.save();
        ctx.translate(350,150);
        // ctx.clearRect(-250,-200,500,400);
        ctx.rotate(deg2 * Math.PI/180);
        ctx.drawImage(img,-100,-50,200,100);
        ctx.restore();
        
        deg1+=15;
        deg2+=30;
      },200)
      
        
        // ctx.save();
        // ctx.rotate(15 * Math.PI/180);
        // ctx.drawImage(img,300,175,100,50);
        // ctx.restore();
    }
    
  
  </script>
</body>
</html>